<template>
	<view class="">
		<scroll-view scroll-y="true" >
			<view class="cu-item" :id="'cu-' + index" v-for="(item, index) in itemList" :key="index"
			>
				<view class="card">
					<view class="title">
						<view class="title">
							<image @click="del(index)" v-show="show" class="editimag" src="@/static/svg/del.svg" mode=""></image>
							{{item.title}}
						</view>
						<image @touchstart="start($event,index)" @touchmove.stop.prevent="move"
						@touchend="stops($event,index)" style="width: 12px;height: 12px;" src="@/static/img/hanbao.png" mode=""></image>
					</view>
					<view class="content ">
						<span @click="choose(item,1)" :class="item.required==1?'notnull':''">必填</span>
						<span @click="choose(item,0)" :class="item.required==0?'notnull':''">非必填</span>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 移动悬浮 begin -->
		<view v-if="showMoveImage">
			<view class="slide" style="position: absolute;padding: 0 30rpx;"
				:style="{ left: moveLeft + 'px', top: moveTop + 'px','background-color':moveItem.color }">
				
				<view class="card">
					<view class="title">
						<view class="title">
							{{moveItem.title}}
						</view>
						<image style="width: 12px;height: 12px;" src="@/static/img/hanbao.png" mode=""></image>
					</view>
					<view class="content ">
						<span :class="moveItem.required==1?'notnull':''">必填</span>
						<span :class="moveItem.required==0?'notnull':''">非必填</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 移动悬浮 end -->
	</view>
</template>

<script>
	export default {
		name: 'exchange',
		model: {
			prop: "showPop",
			event: "change"
		},
		props: {
			list: { // 数据交换列表
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				itemTop: 0,
				itemLeft: 0,
				itemHeight: 0, // 移动元素的高度
				itemWidth: 0, // 移动元素的宽度
				showMoveImage: false,
				moveItem: '',
				moveLeft: 0,
				moveTop: 0,
				deltaLeft: 0,
				deltaTop: 0,
				marginDis: 0,
				beginleft: 0,
				begintop: 0,
				itemList: [],
				moveIndex:0,
				show:false
			}
		},
		watch: {
			list: {
				handler(val) {
					this.itemList = val;
				},
				immediate: true,
				deep: true
			}
		},
	
		methods: {
			del(index){
				this.itemList.splice(index,1)
				this.$emit('backchange',this.itemList)
			},
			choose(item,e){
				item.required=e
				console.log(item.required);
				this.$forceUpdate()
			},
			start(e, index) {
				const query = uni.createSelectorQuery().in(this);
				// setTimeout(()=>{
					query.select(`#cu-${index}`).boundingClientRect(data => {
						//#ifndef H5
						this.moveTop = data.top
						//#endif
						this.moveLeft = 0
						this.moveItem = this.itemList[index]
						this.itemWidth = data.width
						this.itemHeight = data.height
						this.showMoveImage = true; //悬浮开始
					}).exec();
				// },200)
				
			},
			move(e) {
				const touch = e.touches[0];
				if (this.deltaLeft == 0) { // 获得本身的移动
					this.deltaLeft = touch.pageX - this.moveLeft;
					this.deltaTop = touch.pageY - this.moveTop;
				}
				// this.moveLeft = touch.pageX - this.deltaLeft;
				this.moveTop = touch.pageY - this.deltaTop;
				
			},
			stops(e, index) {
				const touch = e.mp.changedTouches[0]
				this.deltaLeft = 0
				this.showMoveImage = false;
				this.findOverIndex(touch.pageY,index);
			},
			// 找到停下的元素的下标
			findOverIndex(posY,index) {
				const that = this;
				const query = uni.createSelectorQuery().in(this);
	
				 query.selectAll(`.cu-item`).boundingClientRect().exec(res => {
					let data=res[0],lang=data.length
					if(lang>1){
						let h=data[1].top-data[0].top
						data.forEach((itm,idx)=>{
							let a=itm.top+h
							if(idx==0 && posY<a){
								that.moveIndex=0
							}
							else if(idx==lang-1 && posY>itm.top){
								that.moveIndex=lang-1;
							}
							else if(posY>=itm.top && posY<=a){
								that.moveIndex= idx;				
							}
						})
					}else{
						that.moveIndex= 0;
					}
					let obj= that.itemList[index]
					that.itemList[index]=that.itemList[that.moveIndex]
					that.itemList[that.moveIndex]=obj
					that.$emit('backchange',that.itemList)
					that.$forceUpdate()
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.editimag{
		width:18px;
		height: 18px;
		padding-right: 16rpx;
	}
	.cu-item ,.slide{
		width: 100%;
	}
	.title{
		font-size: 18px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.card{
		background-color: #FFF;
		width: 100%;
		border-radius: 16rpx;
		padding:20rpx;
		margin-top: 20rpx;
	}
	.content{
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		span{
			background-color: #F5FAFA;
			border-radius: 10rpx;
			color: #999999;
			padding: 16rpx 0;
			width: 48%;
			text-align: center;
		}
		.notnull{
			border: 1px solid #6EC9E1;
			color: #6EC9E1;
		}
	}
	

</style>
